<template>
	<view class="cc-cell-item-wrap">
		<block v-if="$slots.default">
			<slot></slot>
		</block>
		<view v-else class="cell-item-content">
			<view class="title">
				{{title}}
			</view>
			<view class="right">
				<!-- 文本 -->
				<template v-if="props.type==='scheduleTime'">
					<view class="right-content" @tap="handelOpenScheduleTime">
						<text class="right__text">{{label}}</text>
						<!-- 箭头按钮 -->
						<text class="esfont cell__icon--arrow" v-if="showArrow">&#xe6d5;</text>
					</view>
					<cc-schedule-time ref="scheduleTimeRef" @change="handleScheduleTimeChange"></cc-schedule-time>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';

	const props = defineProps({
		// 标题
		title: {
			type: String,
			default: '',
		},
		// 值
		modelValue: {
			type: [Number, String, Object],
			default: '',
		},
		// 类型
		type: {
			type: String,
			default: 'text',
		},
		// 是否显示箭头
		showArrow: {
			type: Boolean,
			default: true,
		},
	});

	watch(
		() => props.modelValue,
		(newValue) => {
			init(newValue);
		}, {
			deep: true
		}
	);

	onMounted(() => {
		init(props.modelValue);
	});

	const emit = defineEmits(['update:modelValue', 'change']);
	const label = ref('');

	const scheduleTimeRef = ref(null);

	const init = (newValue) => {
		let tempLabel = props.type == 'scheduleTime' ? newValue.label : '';
		label.value = tempLabel;
	}

	// 打开时间选择
	const handelOpenScheduleTime = () => {
		scheduleTimeRef.value.open();
	};

	// 处理时间改变事件
	const handleScheduleTimeChange = (dateTime) => {
		console.log(dateTime);
		emit('update:modelValue', dateTime);
		emit('change', dateTime);
	};
</script>

<style lang="scss" scoped>
	.cc-cell-item-wrap {
		background: #FFFFFF;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		padding: 15rpx 0;

		.cell-item-content {
			border-radius: 16rpx;
			background: #FFFFFF;
			/* #ifndef APP-NVUE */
			display: flex;
			box-sizing: border-box;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			gap: 20rpx;

			.title {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				justify-content: center;
				align-items: flex-start;
				font-size: inherit;
				line-height: 40rpx;
				gap: 5rpx;
			}

			.right {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				font-size: inherit;

				.right-content {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					align-items: center;
				}

				// 右侧文本 
				.right__text {
					word-wrap: normal;
					white-space: nowrap;
					font-size: inherit;
					line-height: 40rpx;
					color: #aaa;
					max-width: 400rpx;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}

	.cell__icon--arrow {
		font-size: 22rpx;
		line-height: 40rpx;
		color: #aaa;
		margin-left: 10rpx;
	}
</style>